<template>
  <transition
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__bounceIn"
      leave-active-class="animate__bounceOut"
  >
    <li>
      <label>
        <input type="checkbox" :checked="todoObj.completed" @click="handleCheck(todoObj.id)">
        <span v-show="!todoObj.isEdit">{{todoObj.title}}</span>
        <input
            type="text"
            :value="todoObj.title"
            v-show="todoObj.isEdit"
            @keyup.enter="changeEdit(todoObj,$event)"
            @blur="changeEdit(todoObj,$event)"
            ref = 'inputTitle'
        >
      </label>
      <button class="btn btn-danger" @click="deleteButton(todoObj.id)">删除</button>
      <button class="btn btn-edit" @click="handleEdit(todoObj)" v-show="!todoObj.isEdit">编辑</button>
    </li>
  </transition>


</template>

<script>
import 'animate.css'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Item",
  props:['todoObj'],
  methods:{
    handleCheck(id){
      this.$bus.$emit('checkTodo',id)
    },
    deleteButton(id){
      //console.log(id)
      if(confirm('确定删除吗?'))   this.$bus.$emit('deleteTodo',id)
    },
    //编辑
    handleEdit(todo){
      // eslint-disable-next-line no-prototype-builtins
      if(!todo.hasOwnProperty('isEdit')){
        this.$set(todo,'isEdit',true)
      }else {
        todo.isEdit = true
      }
      //nextTick会在Vue进行DOM解析完成后执行
      this.$nextTick(()=>{
        this.$refs.inputTitle.focus()
      })
    },
    changeEdit(todo,e){
      todo.isEdit = false
      if(!e.target.value.trim()) return alert('输入不能为空')
      this.$bus.$emit('changeTitle',todo.id,e.target.value)

    }
  }
}
</script>

<style scoped>
    /*  item*/
    li{
      list-style: none;
      height: 36px;
      line-height: 36px;
      padding: 0 5px;
      border-bottom: 1px solid #ddd;
    }
    li label{
      float: left;
      cursor: pointer;
    }
    li label li input{
      vertical-align: middle;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }
    li button{
      float: right;
      display: none;
      margin-top: 3px;
    }
    li:before{
      content:initial;
    }
    li:last-child{
      border-bottom: none;
    }
    li:hover{
      background-color: #ddd;
    }
    li:hover button{
      display: block;
    }
</style>